<template>
  <div class="champion-skin">
    <div class="i-layout-page-header">
      <PageHeader title="英雄皮肤" hidden-breadcrumb />
    </div>
    <!-- 搜索功能组件  -->
    <div class="search">
      <Input
        search
        placeholder="请输入..."
        v-width="200"
        v-model="find"
        class="ivu-ml"
        @on-change="fuzzySearch"
      />
    </div>

    <!-- 展示功能组件 -->
    <div
      class="champion-skin-Card"
      style="background: #eee; padding: 20px"
      v-for="(item, index) in championSkinListVO"
      :key="index"
    >
      <Col>
        <Card style="overflow: scroll">
          <div class="topimg" slot="title">
            <!-- <img width="75px" :src="item.iconImg" /> -->
            <h1 class="h">{{ item.name }}</h1>
            <!-- 上传功能组件 -->
            <Upload multiple action="">
              <Button icon="ios-cloud-upload-outline">上传新的皮肤</Button>
            </Upload>
          </div>
          <div class="hero-list">
            <div
              class="loading"
              v-for="(items, index) in champions"
              :key="index"
              v-show="items.championId == item.id"
            >
              <img width="150px" :src="items.loadingImg" />
              <h3 v-if="items.name == 'default'">
                {{ items.championName }} {{ items.championTitle }}
              </h3>
              <h3 v-else>
                {{ items.name }}
              </h3>
            </div>
          </div>
        </Card>
      </Col>
    </div>
    <div>
      <BackTop :height="50" :bottom="30">
        <div class="top">返回顶端</div>
      </BackTop>
    </div>
    <div class="ivu-mt ivu-text-right">
      <Page
        :total="page.total"
        :current="page.current"
        show-total
        show-sizer
        @on-change="pageNumChange"
        @on-page-size-change="pageSizeChange"
      />
    </div>
  </div>
</template>
<script>
import { listChampionSkinPage, SelectChampionSkin } from "@/api/champion-skin";
export default {
  name: "champion-skin",
  data() {
    return {
      champions: [],
      page: {
        total: 0,
        current: 1,
      },
      // 模糊查询
      find: "",
      // 分页查询
      query: {
        pageNum: 0,
        pageSize: 10,
        type: "all",
        find: "",
      },
    };
  },
  methods: {
    // 更新页码
    pageNumChange(num) {
      this.query.pageNum = num;
      // 重新获取数据
      this.listChampionSkin();
    },
    // 更新每页显示数量
    pageSizeChange(size) {
      this.query.pageSize = size;
    },
    // 更新英雄皮肤列表
    listChampionSkin() {
      listChampionSkinPage(this.query).then((res) => {
        // console.log(res);
        this.championSkinListVO = res.list;
        this.page.total = res.total;
        this.page.current = res.pageNum;
      });
    },
    SelectChampion() {
      SelectChampionSkin().then((ree) => {
        // console.log(res);
        this.champions = ree;
      });
    },
    fuzzySearch() {
      this.query.find = this.find;
      this.query.type = "all";
      this.listChampionSkin();
    },
  },
  mounted() {
    console.log("Vue 实例挂载之后");
    this.listChampionSkin();
    this.SelectChampion();
  },
};
</script>
<style lang="less" scoped>
.search {
  .championsearch {
    width: 200px;
    padding-bottom: 10px;
  }
}

.head {
  // border: 1px solid rgb(255, 255, 255);
  flex-direction: column;
  padding: 10px;
}

.topimg {
  //头像属性
  display: flex;
  align-items: center;
}

.h {
  //头像文字偏移
  padding-left: 10px;
}

.hero-list {
  display: flex;
  flex-direction: row;
}

.loading {
  // width: 220px;
  // border: 1px solid rgb(255, 255, 255);

  display: flex;
  flex-direction: column; //图片和文字沿竖轴由上向下垂直显示
  align-items: center; //居中

  padding-right: 10px;
}

.top {
  padding: 10px;
  background: rgba(0, 153, 229, 0.7);
  color: #fff;
  text-align: center;
  border-radius: 2px;
}
</style>